<script setup lang="ts">
import { getHomeBannerApi } from '@/services/home'
import { getCategoryApi } from '@/services/home'
import { getHotMutli } from '@/services/home'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNacbar from './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import type { HomeBannerType } from '@/types/homeType'
import type { CategoryItem } from '@/types/homeType'
import type { HotMutliItem } from '@/types/homeType'
import { useGuessList } from '../../composables/index'
import type { XtxGuessInstance } from '../../components/component'
import PageSkeleton from './components/PageSkeleton.vue'
//获取轮播图数据
const getHomeBannerData = async () => {
  const res = await getHomeBannerApi()
  BannerList.value = res.result
}
const BannerList = ref<HomeBannerType[]>([])

//获取前台分类数据
//在TypeScript中，
//`ref`是一个用来表示对一个可变值的引用的特殊类型。
//它通常用于将某个变量传递给函数，
//使得函数可以修改这个变量的值。
//`ref`类型在TypeScript中通常与`useRef`钩子一起使用，
//用来在函数组件中保存可变的状态，
//并且能够触发重新渲染。

const getCategoryData = async () => {
  const res = await getCategoryApi()
  categoryList.value = res.result
}
const categoryList = ref<CategoryItem[]>([])
//获取热门推荐
const getHotList = async () => {
  const res = await getHotMutli()
  hotList.value = res.result
}
const hotList = ref<HotMutliItem[]>([])
const { guessRef, onscrollToLower } = useGuessList()
onLoad(() => {
  isloand.value = true
  Promise.all([getCategoryData(), getHomeBannerData(), getHotList()])
  isloand.value = false
})
const istriggered = ref(false)
const isloand = ref(false)
//刷新数据
const onrefresh = async () => {
  istriggered.value = true
  guessRef.value?.resetData()
  await Promise.all([getCategoryData(), getHomeBannerData(), getHotList()])
  istriggered.value = false
}
</script>

<template>
  <CustomNacbar />
  <PageSkeleton v-show="isloand"></PageSkeleton>
  <scroll-view scroll-y style="flex: 1" refresher-enabled @refresherrefresh="onrefresh()"
    @scrolltolower="onscrollToLower" v-show="!isloand" :refresher-triggered="istriggered">
    <XtxSwiper :list="BannerList" />
    <CategoryPanel :list="categoryList" />
    <HotPanel :list="hotList" />
    <XtxGuess ref="guessRef" />
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
